<template>
  <Echarts
    id="echarts"
    height="300px"
    :full-options="echartsOptions"
    :loading="loading"
  >
  </Echarts>
</template>
 
<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
// 引进Echarts 组件
import Echarts from "@/components/Echarts/Echarts.vue";
// 引进Echarts 的options配置文件，可根据项目模块来创建该配置文件
// import chartOption from "../../components/Echarts/options";
const loading = ref(false); // 初始值可以根据实际情况设定
const echartsOptions = reactive({
  options: {},
  init: false,
});
// 此处可请求接口来获取数据
// 我的options配置使用的是dataset的形式，传进options中的两个参数data（图表的数据）和dimension（图表的维度），
onMounted(() => {
  const yDataArr = [
    130, 204, 224, 342, 423, 435, 657, 738, 654, 464, 678, 576, 567,
  ];
  const xDataArr = [
    "1月",
    "2月",
    "3月",
    "4月",
    "5月",
    "6月",
    "7月",
    "8月",
    "9月",
    "10月",
    "11月",
    "12月",
  ];
  // echartsOptions.options = chartOption.testOption(testData, testDimensions);
  echartsOptions.options = {
    xAxis: {
      type: "category",
      data: xDataArr,
      boundaryGap: false, // 紧挨边缘：x轴的第1个元素是否与y轴有距离
    },
    yAxis: {
      type: "value",
      scale: true, // 缩放：脱离0值比例，设为true则使y值无需从0开始
    },
    series: [
      {
        name: "销量",
        data: yDataArr,
        type: "line",
        markArea: {
          // 标记区域
          data: [
            [
              //起始
              {
                xAxis: "1月",
              },
              {
                xAxis: "2月",
              },
            ],
            [
              {
                xAxis: "7月",
              },
              {
                xAxis: "8月",
              },
            ],
          ],
        },
        smooth: true, // 是否为平滑线
        lineStyle: {
          // 线的样式设置
          color: "green",
          type: "solid", // dashed dotted solid
        },
        areaStyle: {
          // 线和x轴形成的区域设置
          color: "pink",
        },
      },
    ],
  };
});
</script>